<template>
  <div class="fast-token">
    <div class="head-btn flex-between">
      <!-- 设置手续费 -->
      <el-button type="primary" size="medium" @click="openFeeDialog()">设置手续费</el-button>
      <el-dialog
        title="提示"
        :visible.sync="showFeeDialog"
        width="537px"
        center
        :close-on-click-modal="false"
      >
        <h3 slot="title" class="fee-title">设置手续费</h3>
        <div class="set-form">
          <div class="line">
            <label>平行链名称</label>
            <span v-if="feeParam.chains.length===1">{{this.feeParam.chains[0].platform}}</span>
            <el-select
              v-model="feeParam.index"
              placeholder="请选择"
              size="small"
              @change="selectFeeChain"
              v-else
            >
              <el-option
                v-for="(item,index) in feeParam.chains"
                :key="item.id"
                :label="item.platform"
                :value="index"
              ></el-option>
            </el-select>
          </div>
          <div class="line">
            <label>燃料币种</label>
            <span v-if="feeParam.tokens.length===1">{{feeParam.tokens[0]}}</span>
            <el-select v-model="feeParam.charge_unit" placeholder="请选择" size="small" v-else>
              <el-option v-for="item in feeParam.tokens" :key="item" :value="item"></el-option>
            </el-select>
          </div>
          <div class="line">
            <label>数量</label>
            <el-input v-model="feeParam.issue_charge" size="small" placeholder="请设置手续费数量"></el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="setFee()">确 认</el-button>
        </span>
      </el-dialog>
      <!-- 人工审核/地址搜索 -->
      <div class="right-group flex-right">
        <span v-if="$store.state.userInfo.group === 'administrator'">人工审核</span>
        <el-switch
          v-if="$store.state.userInfo.group === 'administrator'"
          class="switch"
          style="display: block"
          v-model="manualAudit"
          @change="setAuditStatus"
          inactive-color="#52556d"
          active-color="#ff7e03"
        ></el-switch>
        <el-input
          placeholder="请输入地址"
          v-model="search"
          class="input-with-select"
          size="medium"
          clearable
        >
          <el-button slot="append" icon="el-icon-search" @click="searchAdr()"></el-button>
        </el-input>
      </div>
    </div>
    <div class="data-table">
      <div class="title flex-between">
        <div class="flex-left">
          <img src="../../assets/img/title.png">
          <span>发行记录</span>
        </div>
        <div class="flex-right">
          <div class="search-box flex-left" v-if="chainList.length>1">
            <label>平行链名称</label>
            <el-select
              v-model="param.chain_name"
              placeholder="请选择"
              class="token-select"
              size="mini"
              @change="filterName"
            >
              <el-option
                :label="item.chain_name"
                :value="item.chain_id"
                v-for="item in chainList"
                :key="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="search-box flex-left">
            <label>状态</label>
            <el-select
              v-model="param.status"
              placeholder="请选择"
              class="token-select"
              size="mini"
              @change="filterStatus"
            >
              <el-option
                :label="item.text"
                :value="item.value"
                v-for="item in statusList"
                :key="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="filterTable"
        size="medium"
        v-loading="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(211, 215, 212, 0.5)"
      >
        <el-table-column label="TOKEN" width="130" align="center">
          <template slot-scope="token">
            <div class="flex-center">
              <img :src="token.row.icon" class="symbol">
              <el-tooltip placement="right" effect="light" popper-class="tip-adr">
                <div slot="content">
                  <p>TOKEN全称： {{token.row.name}}</p>
                  <p>TOKEN简介： {{token.row.introduction}}</p>
                </div>
                <span class="symbol">{{token.row.symbol}}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="平行链名称" width="100" align="center">
          <template slot-scope="scope">{{scope.row.chain_name}}</template>
        </el-table-column>
        <el-table-column prop="owner" label="地址" align="center" width="150">
          <template slot-scope="scope">
            <el-tooltip placement="bottom" effect="light" popper-class="tip-adr">
              <div slot="content">
                <p>
                  {{scope.row.owner}}
                  <span
                    v-clipboard:copy="scope.row.owner"
                    v-clipboard:success="success"
                    v-clipboard:error="error"
                  >复制</span>
                </p>
              </div>
              <p>{{scope.row.owner|filterHash(10)}}</p>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="浏览器地址" align="center" min-width="130"></el-table-column>
        <el-table-column prop="total" label="发行量 (个)" align="center" width="150"></el-table-column>
        <el-table-column prop="isAdd" label="可增发" align="center" width="80">
          <template slot-scope="item">{{item.row.category===1? '是':'否'}}</template>
        </el-table-column>
        <el-table-column label="手续费" align="center">
          <template slot-scope="item">{{item.row.charge}} {{item.row.charge_unit}}</template>
        </el-table-column>
        <el-table-column prop="create_time" label="时间" align="center" width="100"></el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.type===0?'首次发币':'增发'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.status|filterStatus}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="item">
            <div class="flex-center">
              <div
                class="btn"
                @click="audit(item.row,1)"
                v-if="item.row.status===5&&manualAudit===true"
              >通过</div>
              <div
                class="btn"
                @click="audit(item.row,2)"
                v-if="item.row.status===5&&manualAudit===true"
              >拒绝</div>
              <div
                class="btn"
                v-if="item.row.status===3&&item.row.url"
                @click="viewToken(item.row)"
              >查看</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom-box">
        <pages
          :pages="param"
          :total="param.total"
          @pageChange="pageChange"
          @pageSizeChange="pageSizeChange"
        ></pages>
      </div>
    </div>
  </div>
</template>

<script>
import Pages from "@/components/PageBox.vue";
import BaseJS from "./FastToken";
export default {
  components: {
    Pages
  },
  mixins: [BaseJS]
};
</script>

<style lang="scss">
.fast-token {
  padding-top: 10px;
  .data-table {
    margin-top: 20px;
    padding-bottom: 15px;
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(162, 162, 162, 0.5);
    .title {
      padding: 16px 22px;
      font-size: 18px;
      color: #2d3647;
      span {
        margin-left: 10px;
      }
    }
    img.symbol {
      height: 26px;
      margin-right: 15px;
    }
    span.symbol {
      color: #409eff;
    }
    thead th {
      background-color: #f8f9fd;
    }
    .btn {
      margin: 0 5px;
      width: 65px;
      height: 30px;
      line-height: 30px;
      border-radius: 2px;
      border: 1px solid rgba(64, 158, 255, 1);
      color: #409eff;
      font-size: 13px;
      flex-shrink: 0;
      cursor: pointer;
      transition: 0.3s;
    }
    .btn:hover {
      background: #409eff;
      color: #fff;
    }
    .el-table {
      font-size: 13px;
      .el-table__column-filter-trigger {
        margin-left: 5px;
      }
    }
    .search-box {
      width: 220px;
      label {
        font-size: 14px;
        width: 10em;
        text-align: right;
        margin-right: 10px;
      }
    }
  }
  .switch {
    margin: 0 32px 0 18px;
  }
  .input-with-select {
    width: 341px;
    .el-input-group__append {
      background-color: #66b1ff;
      color: #fff;
    }
  }
}
.tip-adr {
  max-width: 220px;
  border: 1px solid #409eff !important;
  p {
    line-height: 20px;
  }
  span {
    margin-left: 10px;
    color: #409eff;
    cursor: pointer;
  }
}
.set-form {
  .line {
    line-height: 55px;
    label {
      display: inline-block;
      width: 5em;
      text-align: right;
      margin-right: 20px;
    }
    .el-input {
      width: 360px;
    }
    .el-select {
      width: 360px;
    }
  }
}
.fee-title {
  font-size: 24px;
  color: #2d3647;
  font-weight: 600;
}
</style>